<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24"
			        style="padding: 0px;">
	
				<el-col :span="6"
				        style="padding-right: 5px!important;padding-left: 15px!important">
					<el-input size="small"
					          placeholder="请输入内容"
					          v-model="resTreeSearchValue"
					          icon="search"
					          @click="searchTree"></el-input>
				</el-col>
				<el-col :span="1"
				        style="margin-right:10px;">
					<p class="queryLabel">查询条件:</p>
				</el-col>
				<el-col :span="5">
					<el-input size="small"
					          v-model="searchValue"
					          placeholder="请输入内容"
					          style="width:120!important;">
					</el-input>
	
				</el-col>
				<el-col :span="1">
					<el-button type="primary"
					           size="small"
					           v-on:click="queryDeptGrid">查询</el-button>
				</el-col>
				<el-col :span="11"
				        style="text-align: right;margin-left:-10px;"
				        v-if="buttonShow">
					<el-button type="primary"
					           size="small"
					           v-on:click="add"
					           v-if="addShow">新增</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="edit()">编辑</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="start()">启用</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="stop()">停用</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="changBrand()">变更品牌</el-button>
				</el-col>
			</el-col>
		</el-row>
		<!--左右 列表 开始-->
		<el-row :gutter="24">
			<!--左列表 开始-->
			<el-col :span="6"
			        style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="deptTreeData"
				         :filter-node-method="filterNode"
				         :highlight-current=true
				         :props="defaultProps"
				         accordion
				         @node-click="handleNodeClick"
				         ref="tree"
				         node-key="id">
				</el-tree>
	
			</el-col>
			<!--左列表 结束-->
			<!--右侧列表 开始-->
			<el-col :span="18"
			        style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table :data="deptGrid.dataList"
				          @selection-change="handleSelectionChange"
				          stripe
				          style="text-align: center;height:460px;">
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>
					<el-table-column prop="oName"
					                 label="组织名称"
					                 width="340">
					</el-table-column>
					<el-table-column prop="oShortName"
					                 label="组织简称"
					                 width="260">
					</el-table-column>
					<el-table-column prop="oType"
					                 label="组织类型"
					                 :formatter="deptTypeCov"
					                 width="100">
					</el-table-column>
					<el-table-column prop="oArea"
					                 label="所属区域"
					                 :formatter="areaCov"
					                 width="100">
					</el-table-column>
					<el-table-column prop="oCarBrand"
					                 label="经营品牌"
					                 :formatter="brandCov"
					                 width="150">
					</el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="120">
					</el-table-column>
					<!--<el-table-column label="操作"
										                 width="240"
										                 fixed="right">
											<template scope="scope">
												<el-tooltip class="item"
												            effect="light"
												            content="编辑"
												            placement="top">
													<el-button type="primary"
													           size="mini"
													           class="iconfont icon-dingdan"
													           @click.native.prevent="edit(scope.$index)"></el-button>
												</el-tooltip>
												<el-tooltip class="item"
												            effect="light"
												            content="启用"
												            placement="top">
													<el-button type="info"
													           size="mini"
													           class="iconfont icon-kaishi"
													           @click.native.prevent="start(scope.$index)"></el-button>
												</el-tooltip>
												<el-tooltip class="item"
												            effect="light"
												            content="停用"
												            placement="top">
													<el-button type="warning"
													           size="mini"
													           class="iconfont icon-stop"
													           @click.native.prevent="stop(scope.$index)"></el-button>
												</el-tooltip>
												<el-tooltip class="item"
												            effect="light"
												            content="变更品牌"
												            placement="top">
													<el-button type="danger"
													           size="mini"
													           class="iconfont icon-bianji"
													           @click.native.prevent="changBrand(scope.$index)"></el-button>
												</el-tooltip>
											</template>
										</el-table-column>-->
				</el-table>
				<el-pagination small
				               @current-change="handleCurrentChange"
				               :current-page="deptCurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="deptGrid.total">
				</el-pagination>
			</el-col>
			<!--右侧列表 结束-->
		</el-row>
		<!--左右 列表 结束-->
		<!--部门表单 新增 按钮 按下-->
		<el-dialog title="部门信息"
		           v-model="deptFormShow"
		           size="small" >
			<el-row>
				<el-form :model="deptFormData"
				         ref="deptForm"
				         :rules="deptRule"
				         label-width="120px">
					<el-form-item label="公司/部门名称"
					              required
					              prop="oName">
						<el-input size="small"
						          v-model="deptFormData.oName"></el-input>
					</el-form-item>
					<el-form-item label="公司/部门简称"
					              prop="oShortName"
					              required>
						<el-input size="small"
						          v-model="deptFormData.oShortName"></el-input>
					</el-form-item>
					
					<el-row>
						<el-col :span="12">
							<el-form-item label="组织类型"
							              required
							              prop="oType">
								<el-select size="small"
								           v-model="deptFormData.oType"
								           placeholder="请选择"
								           clearable>
									<el-option v-for="item in orgCombo"
									           :label="item.label"
									           :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="办公电话"
							              required
							              prop="oPhone">
								<el-input size="small"
								          v-model="deptFormData.oPhone"></el-input>
							</el-form-item>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="显示顺序"
							              prop="oDispOrder">
								<el-input-number size="small"
								                 v-model="deptFormData.oDispOrder"
								                 :min="0"
								                 :max="999"></el-input-number>
							</el-form-item>
						</el-col>
							<el-col :span="12">
								<el-form-item label="所属区域"
								              prop="oArea">
									<el-select size="small"
									           v-model="deptFormData.oArea"
									           @change="getAreaSecondCombo"
									           placeholder="请选择">
										<el-option v-for="item in areaCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="二级区域"
								              prop="oAreaSecond">
									<el-select size="small"
									           v-model="deptFormData.oAreaSecond"
									           placeholder="请选择">
										<el-option v-for="item in areaSecondCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="经营品牌"
								              prop="oCarBrand">
									<el-select size="small"
									           v-model="deptFormData.oCarBrand"
									           placeholder="请选择"
									           :disabled="canBrandEdit">
										<el-option v-for="item in brandCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="兼营品牌"
								              prop="runBrands">
									<el-select size="small"
									           v-model="deptFormData.runBrands"
									           placeholder="请选择"
									           multiple>
										<el-option v-for="item in brandCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="兼修品牌"
								              prop="buildBrands">
									<el-select size="small"
											   multiple
									           v-model="deptFormData.buildBrands"
									           placeholder="请选择">
										<el-option v-for="item in brandCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="省"
								              prop="oProvance">
									<el-select size="small"
									           v-model="deptFormData.oProvance"
									           @change="provinceChange"
									           placeholder="省">
										<el-option v-for="item in provenCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="市"
								              prop="oCity">
									<el-select size="small"
									           v-model="deptFormData.oCity"
									           placeholder="市">
										<el-option v-for="item in cityCombo"
										           :label="item.label"
										           :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="公司IP地址"
					              prop="companyIpAddress"
					              required>
									<el-input size="small" v-model="deptFormData.companyIpAddress"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="经度"
					              prop="longtitude"
					              required>
									<el-input size="small" v-model="deptFormData.longtitude"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="纬度"
					              prop="latitude"
					              required>
									<el-input size="small" v-model="deptFormData.latitude"></el-input>
								</el-form-item>
							</el-col>
						
						
							<el-col :span="24">
								<el-form-item label="详细地址"
								              prop="oAddress">
									<el-input size="small"
									          type="textarea"
									          :rows="2"
									          placeholder="请输入内容"
									          v-model="deptFormData.oAddress">
									</el-input>
								</el-form-item>
							</el-col>
					</el-row>
	
					<el-form-item label="备注"
					              prop="oDesc">
						<el-input size="small"
						          type="textarea"
						          :rows="2"
						          placeholder="请输入内容"
						          v-model="deptFormData.oDesc">
						</el-input>
					</el-form-item>
					
					
					<el-row>
						<el-col :span="6" style="margin-left: 50px;">
							<P style="font-size: larger;">门店图片：</P>
						</el-col>
					</el-row>
						
					<el-row >
						
						<el-col :span="6" style="margin-left: 50px;">
							<div id="imageRowId">
								<el-upload 
								  class="avatar-uploader"
								  :action="imgPostUrl"
								  name = "image"
								  :show-file-list="false"
								  :on-success="handleAvatarSuccess"
								  :before-upload="beforeAvatarUpload">
								  <!--<img id="hhhh" class="avatar" :src="loacalImageUrl"/>-->
								  <img class="avatar" v-if='loacalImageUrl != ""'  :src="loacalImageUrl"/>
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
								  <!--<img class="avatar" v-if="loacalImageUrl != ''" :src="loacalImageUrl"/>
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
								</el-upload>
							</div>
							
						</el-col>
						
					</el-row>
					
					
				
				</el-form>
			</el-row>
			<el-row >
				<el-col :span="6" style="float: right;">
					<el-button @click="deptFormShow = false">取 消</el-button>
					<el-button type="primary" @click="saveDept">提 交</el-button>
				</el-col>
			<!--	<div slot="footer"
				     class="dialog-footer">
				     </div>-->
				
			</el-row>
			
		</el-dialog>
		<el-dialog title="变更品牌"
		           v-model="brandFormShow"
		           size="small">
			<el-row>
				<el-form :model="brandFormData"
				         ref="brandForm"
				         label-width="120px">
					<el-form-item label="变更前经营品牌"
					              prop="preName">
						<el-input size="small"
						          v-model="brandFormData.preName"
						          readonly></el-input>
					</el-form-item>
					<el-form-item label="变更后经营品牌"
					              prop="bCode">
						<el-select size="small"
						           v-model="brandFormData.bCode"
						           placeholder="请选择"
						           @change="brandChange">
							<el-option v-for="item in brandCombo"
							           :label="item.label"
							           :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="变更原因"
					              prop="reason">
						<el-input size="small"
						          type="textarea"
						          :rows="2"
						          placeholder="请输入内容"
						          v-model="brandFormData.reason">
						</el-input>
					</el-form-item>
				</el-form>
			</el-row>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="brandFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveBrandHis">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			loacalImageUrl:"",
			imgPostUrl:"",
			//部门类型
			oType: '',
			//分页设置
			page: this.page,
			//当前页
			deptCurentPage: 1,
			//表格查询条件
			searchValue: '',
			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'oName'
			},
			//资源树查询 按钮
			resTreeSearchValue: "",
			//树型查询条件
			treeQueryValue: '',

			//左侧 树型数据
			deptTreeData: [],

			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],
			//表格数据
			deptGrid: {
				total: 0,
				dataList: []
			},

			//公司下级
			comChild: [],
			//部门下级
			deptChild: [],
			//部门表单是否显示
			deptFormShow: false,
			//资源 Form 数据
			deptFormData: {
				id: '',
				oCode: '',
				oName: '',
				oShortName: '',
				oArea: '',
				oCarBrand: '',
				oType: '',
				oProvance: '',
				oCity: '',
				oAddress: '',
				oDispOrder: 0,
				oPId: '',
				oPCode: '',
				oDesc: '',
				status: '1',
				createTime: 0,
				createUser: '',
				updateTime: 0,
				updateUser: '',
				oPhone: '',
				companyIpAddress:'', //公司ip
				longtitude:'', // 经度
				latitude:'', // 纬度
				runBrands:[],//兼营品牌
				buildBrands:[],//兼修品牌
				oAreaSecond:"",//二级区域
			},
			//资源 Form 空数据
			deptEmptyData: {
				id: '',
				oCode: '',
				oName: '',
				oShortName: '',
				oArea: '',
				oCarBrand: '',
				oType: '',
				oProvance: '',
				oCity: '',
				oAddress: '',
				oDispOrder: 0,
				oPId: '',
				oPCode: '',
				oDesc: '',
				status: '1',
				createTime: 0,
				createUser: '',
				updateTime: 0,
				updateUser: '',
				oPhone: '',
				companyIpAddress:'', //公司ip
				longtitude:'', // 经度
				latitude:'', // 纬度
				runBrands:[],//兼营品牌
				buildBrands:[],//兼修品牌
			},
			//品牌经营历史
			brandFormData: {
				id: '',
				bCode: '',
				bName: '',
				preCode: '',
				preName: '',
				brandDesc: '',
				reason: '',
				oId: '',
				createTime: 0,
				createUser: '',
				updateTime: 0,
				updateUser: '',

			},
			//显示品牌表单
			brandFormShow: false,
			//资源类型转换
			deptTypeData: {},
			//品牌转换
			brandCovData: {},
			//品牌是否可编辑
			canBrandEdit: false,
			//区域转换
			areaCovData: {},
			//品牌下拉值
			brandCombo: [],
			//区域下拉值
			areaCombo: [],
			//二级区域
			areaSecondCombo:[],
			//组织类型下拉
			orgCombo: [],
			cityCombo: [],
			//公司下拉
			comChild: [],
			deptChild: [],
			//省下拉列表
			provenCombo: [],
			//市下拉列表
			cityCombo: [],

			//当前组织节点、与组织类型
			curTreeDeptId: '',
			curTreeDeptType: '',

			//组织表单较验规则
			deptRule: {
				oName: [{
					required: true,
					message: '请输入名称',
					trigger: 'blur'
				}],
				oShortName: [{
					required: true,
					message: '请输入简称',
					trigger: 'blur'
				}],
				oType: [{
					required: true,
					message: '请选择部门类型',
					trigger: 'blur'
				}],
				longtitude: [{
					required: true,
					message: '请输入经度',
					trigger: 'blur'
				}],
				latitude: [{
					required: true,
					message: '请输入纬度',
					trigger: 'blur'
				}],
				companyIpAddress: [{
					required: true,
					message: '请输入公司IP',
					trigger: 'blur'
				}],
				oArea: [{
					required: true,
					message: '请选择一级区域',
					trigger: 'blur'
				}],
				oAreaSecond: [{
					required: true,
					message: '请选择二级区域',
					trigger: 'blur'
				}]
			},
			buttonShow:false,
			addShow:false,

		}
	},
	methods: {
		//查询树节点
		searchTree: function () {
			if (this.$data.resTreeSearchValue == "") {
				this.$message("请输入查询条件");
				this.queryTree();
				return;
			}
			this.$refs.tree.filter(this.$data.resTreeSearchValue);
		},
		//点击资源树节点
		handleNodeClick(data) {
			this.$data.curTreeDeptId = data.id;
			this.$data.curTreeDeptType = data.oType;
			this.queryDeptGrid();
			console.log(this.$data.curTreeDeptId); //获取 点击ID
		},
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		//当前分页变化
		handleCurrentChange: function (currentPage) {
			this.$data.deptCurentPage = currentPage;
			this.queryDeptGrid();
		},
		//查询资源列表
		queryDeptGrid: function () {

			this.$http.get(this.API_ROOT + '/rbac/dept/page', {
				params: {
					searchValue: this.$data.searchValue,
					start: this.$data.deptCurentPage,
					limit: this.$data.page.pageSize,
					id: this.$data.curTreeDeptId
				}
			}).then((response) => {
				if(response.data.success){
					this.$data.deptGrid.dataList = response.data.dataList; //Object.assign(this.$data.deptTabelData, response.data.dataList);
				    this.$data.deptGrid.total = Number(response.data.total);
				    this.$data.buttonShow = true;
				    if(response.data.addFlag ==true){
				    	this.$data.addShow = true;
				    }else{
				    	this.$data.addShow = false;
				    }
				}else{
					this.$data.deptGrid.dataList = response.data.dataList; //Object.assign(this.$data.deptTabelData, response.data.dataList);
				    this.$data.deptGrid.total = Number(response.data.total);
					this.$data.buttonShow = false;
					this.$data.addShow = false;
				}
				
			}, (response) => { });
		},

		//启用资源
		start: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/dept/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryDeptGrid();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//停用资源
		stop: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/dept/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryDeptGrid();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//分页点击事件

		//省选择值变动
		provinceChange: function (data) {
		
			debugger;
			this.$data.deptFormData.oCity = "";
			this.queryCity(data);
			debugger;
		},
		/*城市下拉*/
		queryCity: function (pid) {/*350000福建省*/
			debugger;
			//获取城市下拉
			this.$http.get(this.API_ROOT + '/base/province/combo/city', {
				params: {
					id: pid
				}
			}).then((response) => {
				if(response.data.success){
					this.$data.cityCombo = response.data.dataList;
					debugger;
					if(this.$data.deptFormData.oCity == ""){
						this.$data.deptFormData.oCity = response.data.dataList[0].value;
					}
					
				}
				
				
			}, (response) => { });
			
		},
		//改变资源类型
		changOrgCombo: function () {
			//当前资源类型
			var type = this.$data.curTreeDeptType;
			switch (type) {
				case "1":
					this.$data.orgCombo = this.$data.comChild;
					break
				case "2":
					this.$data.orgCombo = this.$data.deptChild;
				default:

			}
		},
		//新增
		add: function () {
			this.changOrgCombo();
			this.$data.deptFormData = Object.assign(this.$data.deptFormData, this.$data.deptEmptyData)
			this.$data.deptFormData.oPId = this.$data.curTreeDeptId;
			this.$data.deptFormData.oPCode = this.$data.curTreeDeptId;
			this.$data.canBrandEdit = false;
			this.$data.deptFormShow = true;
		},
		//编辑
		edit: function () {
				
			if (this.$data.multipleSelection.length == 1) {
				debugger;
				this.changOrgCombo();
				this.$data.loacalImageUrl = "";
				this.$data.imgPostUrl = "";
				this.$data.deptFormData = Object.assign(this.$data.deptFormData, this.$data.deptEmptyData);
				var data = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/rbac/dept/newInfo', {
					params: {
						id: data,
					}
				}).then(function (resp) {
					debugger;
					this.$data.canBrandEdit = true;
					if(resp.data.data.runBrands==null)
					{
						resp.data.data.runBrands=[]
					};
					if(resp.data.data.buildBrands==null)
					{
						resp.data.data.buildBrands=[]
					};
					this.$data.deptFormData = Object.assign(this.$data.deptFormData, resp.data.data);
					this.$data.deptFormData.oProvance = resp.data.data.oProvance;
					
					var t = this.moment(new Date()).format("YYYYMMDDHHmmss");
					
					this.$data.loacalImageUrl = this.API_ROOT + "/rbac/dept/readImage?id="+resp.data.data.id+"&time="+t;
					this.$data.imgPostUrl = this.API_ROOT + "/rbac/dept/writeImage?id="+resp.data.data.id+"&time="+t;
					this.queryCity(this.$data.deptFormData.oProvance); //获取当前省份下城市
					this.$data.deptFormData.oCity = resp.data.data.oCity;
					this.$data.deptFormShow = true;
					debugger;
					//var iii = document.getElementById("hhhh");
					//alert(iii);
					debugger;
					if(this.$data.deptFormData.oArea){
						this.getAreaSecondCombo();
					}
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}
		},
	
		//保存角色
		saveDept: function (index) {
			debugger;
			this.$refs.deptForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/rbac/dept/newSave', this.$data.deptFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.queryTree(); //刷新列表
								this.queryDeptGrid();
								this.$data.deptFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
		},
		//资源类型转换
		deptTypeCov: function (row, column) {
			return this.$data.deptTypeData[row.oType];
		},
		//区域转换
		areaCov: function (row, column) {
			return this.$data.areaCovData[row.oArea];
		},
		//品牌转换
		brandCov: function (row, column) {
			return this.$data.brandCovData[row.oCarBrand];
		},
		/*刷新 tree 树*/
		queryTree: function () {
			this.$http.get(this.API_ROOT + '/rbac/dept/tree', {}).then((response) => {
				this.$data.deptTreeData = response.data.dataList;
				/*调用节点*/
				debugger;
				this.$refs.tree.setCheckedKeys([this.$data.curTreeDeptId]); //将获取的id 放置
				window.treeRef = this.$refs.tree;

			}, (response) => { });
		},
		//资源过滤 增加筛选匹配的目标
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.oShortName.indexOf(value) !== -1 || data.oName.indexOf(value) !== -1;
			/*此处 采用oShortName是因为 查询的关键字 匹配的是 组织简称*/
		},
		//变更经营品牌
		changBrand: function () {
			if (this.$data.multipleSelection.length == 1) {
				this.$confirm('此操作将变更公司经营品牌, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var data = this.$data.multipleSelection[0].id;
					this.$data.brandFormData.preCode = data.oCarBrand;
					this.$data.brandFormData.preName = this.$data.brandCovData[data.oCarBrand];
					this.$data.brandFormData.bName = "";
					this.$data.brandFormData.bCode = "";
					this.$data.brandFormData.oId = data;
					this.$data.brandFormShow = true;
				}).catch(() => { });
			} else {
				this.$message.error("请选择一条数据")
			}
		},

		//变更后经营品牌变更
		brandChange: function (data) {
			if (data == "") {
				this.$data.brandFormData.bName = "";
			} else {
				this.$data.brandFormData.bName = this.$data.brandCovData[data];
			}

		},

		//保存经营品牌变更历史
		saveBrandHis: function () {
			var bCode = this.$data.brandFormData.bCode;
			var preCode = this.$data.brandFormData.preCode;

			if (bCode == preCode) {
				this.$message("没有改变经营品牌");
				return;
			}

			//this.$data.deptFormData.oCity = "";
			this.$http.post(this.API_ROOT + '/base/brandHis/save', this.$data.brandFormData)
				.then(resp => {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						this.queryDeptGrid();
						this.$data.brandFormShow = false;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => { });
		},
		//获取二级区域
		getAreaSecondCombo: function(){
			//获取区域下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: this.$data.deptFormData.oArea
			}
		}).then((response) => {
			this.$data.areaSecondCombo = response.data;
		}, (response) => { });
		},
		/*图片上传*/
		 handleAvatarSuccess(res, file) {
       	 this.loacalImageUrl = URL.createObjectURL(file.raw);
	      },
	      beforeAvatarUpload(file) {
	        const isJPG = file.type === 'image/jpeg';
	        const isMax2 = file.size / 1024 / 1024 * 1024 < 200;
	
	        if (!isJPG) {
	          this.$message.error('上传图片只能是 JPG 格式!');
	        }
	        if (!isMax2) {
	          this.$message.error('上传图片大小不能超过 200 KB!');
	        }
	        return isJPG && isMax2;
	      }

	},

	//组件创建时
	created: function () {
		//获取部门资源树
		this.$http.get(this.API_ROOT + '/rbac/dept/tree', {

		}).then((response) => {
			this.$data.deptTreeData = response.data.dataList;
			if (response.data.dataList.length > 0) {
				this.$data.curTreeDeptId = response.data.dataList[0].id;
				this.$data.curTreeDeptType = response.data.dataList[0].oType;
				this.queryDeptGrid();
			}

		}, (response) => { });

		//获取部门类型转换值
		this.$http.get(this.API_ROOT + '/base/dict/convert', {
			params: {
				group: "orgType"
			}
		}).then((response) => {
			this.$data.deptTypeData = response.data;
		}, (response) => { });

		//获得区域转换
		this.$http.get(this.API_ROOT + '/base/dict/convert', {
			params: {
				group: "area"
			}
		}).then((response) => {
			this.$data.areaCovData = response.data;
		}, (response) => { });
		//获取品牌转换

		this.$http.get(this.API_ROOT + '/base/brand/convert', {}).then((response) => {
			this.$data.brandCovData = response.data;
		}, (response) => { });
		//获取部门类型下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "orgType"
			}
		}).then((response) => {
			this.$data.orgCombo = response.data;
		}, (response) => { });

		//获取公司下级类型下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "comChild"
			}
		}).then((response) => {
			this.$data.comChild = response.data;
		}, (response) => { });

		//获取部门下级类型下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "deptChild"
			}
		}).then((response) => {
			this.$data.deptChild = response.data;
		}, (response) => { });

		//获取区域下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "area"
			}
		}).then((response) => {
			this.$data.areaCombo = response.data;
		}, (response) => { });

		//获取功品牌下拉
		this.$http.get(this.API_ROOT + '/base/brand/combo', {}).then((response) => {
			this.$data.brandCombo = response.data;
		}, (response) => { });

		//获取省下拉
		this.$http.get(this.API_ROOT + '/base/province/combo/province', {
			params: {

			}
		}).then((response) => {
			this.$data.provenCombo = response.data;
		}, (response) => { });
		
	}

};
</script>
<style>
.avatar-uploader .el-upload {
    border: 3px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 378px;
    height: 218px;
    line-height: 378px;
    text-align: center;
  }
 .avatar {
    width: 378px;
    height: 218px;
    display: block;
  }
</style>